import React, { Component } from 'react';
import { Link } from 'react-router-dom';

import { Layout, Menu, Icon } from 'antd';

const { Sider } = Layout;
const SubMenu = Menu.SubMenu;

export default class SiderCustom extends Component {
    constructor(props) {
        super(props);


    }


    state = {
        openKeys: ['sub1'],
    };


    // submenu keys of first level
    rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];



    onOpenChange = (openKeys) => {
        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.setState({ openKeys });
        } else {
            this.setState({
                openKeys: latestOpenKey ? [latestOpenKey] : [],
            });
        }
    }





    render() {

        return (

            <Sider
                trigger={null}
                collapsible
                collapsed={this.props.collapsed}
            >

                {/* <div> logo </div> */}


                <Menu
                    mode="inline"
                    openKeys={this.state.openKeys}
                    onOpenChange={this.onOpenChange}
                    style={{ height: '100%', borderRight: 0 , paddingTop:'32px'}}
                >

                    <Menu.Item key={"/app"}>
                        <Link to={"/app"}><Icon type="home" /><span>首页</span></Link>
                    </Menu.Item>


                    <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
                        <Menu.Item key="1"><Link to='/app/user'>Option 1</Link></Menu.Item>
                        <Menu.Item key="2">Option 2</Menu.Item>
                        <Menu.Item key="3">Option 3</Menu.Item>
                        <Menu.Item key="4">Option 4</Menu.Item>
                    </SubMenu>
                    <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
                        <Menu.Item key="5">Option 5</Menu.Item>
                        <Menu.Item key="6">Option 6</Menu.Item>
                        <SubMenu key="sub3" title="Submenu">
                            <Menu.Item key="7">Option 7</Menu.Item>
                            <Menu.Item key="8">Option 8</Menu.Item>
                        </SubMenu>
                    </SubMenu>
                    <SubMenu key="sub4" title={<span><Icon type="setting" /><span>Navigation Three</span></span>}>
                        <Menu.Item key="9">Option 9</Menu.Item>
                        <Menu.Item key="10">Option 10</Menu.Item>
                        <Menu.Item key="11">Option 11</Menu.Item>
                        <Menu.Item key="12">Option 12</Menu.Item>
                    </SubMenu>
                </Menu>




            </Sider>


        )
    }
}






            // <Sider
            //     trigger={null}
            //     collapsed={collapsed}
            // >
            //     <div className="logo" style={collapsed ? { backgroundSize: '70%' } : { backgroundSize: '30%' }} />
            //     <Menu
            //         theme="dark"
            //         mode="inline"
            //         selectedKeys={[selectedKey]}
            //         onClick={this.menuClick}
            //         onOpenChange={this.openMenu}
            //         openKeys={firstHide ? null : [openKey]}
            //     >

            //         <Menu.Item key={"/app"}>
            //             <Link to={"/app"}><Icon type="home" /><span>首页</span></Link>
            //         </Menu.Item>
            //         <Menu.Item key={"/app/form"}>
            //             <Link to={"/app/form"}><Icon type="form" /><span>表单</span></Link>
            //         </Menu.Item>
            //         <SubMenu
            //             key="/app/chart"
            //             title={<span><Icon type="area-chart" /><span>图表</span></span>}
            //         >
            //             <Menu.Item key="/app/chart/echarts">
            //                 <Link to={'/app/chart/echarts'}><span>echarts</span></Link>
            //             </Menu.Item>
            //         </SubMenu>
            //         <Menu.Item key="/app/richText">
            //             <Link to={'/app/richText'}><Icon type="edit" /><span>富文本</span></Link>
            //         </Menu.Item>
            //         <Menu.Item key="/app/upload">
            //             <Link to={'/app/upload'}><Icon type="upload" /><span>文件上传</span></Link>
            //         </Menu.Item>
            //     </Menu>
            // </Sider>
